<template>
    <view class="multiple-goods">
		<image class="coverimg" mode="aspectFill" :src="data.goods_image"></image>
        <view class="content">
            <view class="goods-title">{{data.goods_name}}</view>
			<view class="goods-price">
				<text class="goods-price-red">￥</text>
				<text class="goods-price-red large">32</text>
				<text class="goods-price-red">/套</text>
				<text class="goods-price-grey">￥300/套</text>
			</view>
			<view class="goods-buy-num">3548人已购买</view>
			<view class="footer">
				<view class="back-price">
					<view class="back-price-text">返</view>
					<view class="back-price-money">￥25.45</view>
				</view>
				<view class="add"></view>
			</view>
		</view>
    </view>
</template>
<script>
export default  {
    name: "multipleGoods",
	props: {
	  data: Object
	}
}
</script>
<style lang="scss" scoped>
	@import url('index.scss');
    .multiple-goods {
		font-family: HarmonyOS Sans SC;
        border-radius: 24rpx;
        background: #FFFFFF;
		overflow: hidden;
        .coverimg{
            height: 350rpx;
			width: 100%;
        }
		.content {
		    padding: 24rpx 16rpx;
		}

		.footer {
			padding-top: 16rpx;
			display: flex;
			justify-content: space-between;
			.back-price {
				display: inline-flex;
				height: 48rpx;
                line-height: 48rpx;
				font-size: 24rpx;
				font-weight: bold;
				border-radius: 32rpx;
                border: 2rpx solid #FF8A1F;
                overflow: hidden;
                &-text {
					padding-left: 8rpx;
                    width: 40rpx;
                    text-align: center;
                    color: #ffffff;
                    background-color: #FF8A1F;
                }
                &-money {
					padding: 0 5rpx;
                    min-width: 110rpx;
					color: #FF8A1F;
					background: rgba(255, 138, 31, 0.08);
                }
			}
			.add {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				background: url("../../../../static/addIcon.png") #FF8A1F center no-repeat;
			}
		}

    }
</style>